<template>
  <el-form ref="loginFrom" :model="loginFormData" status-icon :rules="commonRules" label-width="120px" class="demo-loginFormData">
    <el-form-item label="用户名" prop="username" class="username-form-item">
      <el-input v-model="loginFormData.username" type="text" autocomplete="off" />
    </el-form-item>  
    <el-form-item label="密码" prop="password" class="password-form-item">
      <el-input v-model="loginFormData.password" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item label="验证码" prop="captcha" class="captcha-form-item">
      <el-input v-model="loginFormData.captcha" maxlength="5" @keydown.enter="submitForm(loginFrom)"/>
      <span class="span" v-html="captcha" @click="getCaptcha" v-loading="loading"></span>
    </el-form-item>
    <el-form-item class="login-button">
      <el-button type="primary" @click="submitForm(loginFrom)">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
  import { reactive, ref,onMounted, onUnmounted} from 'vue'
  // 引入接口
  import * as api from "@/api/users.js"
  // 引入校验函数
  import {commonRules,useSubmitForm} from "../../composition/login/validate" 
  // 引入store
  import {useUser} from "@/store/users"
  // 引入路由对象
  import {useRouter} from "vue-router"
  // 引入loading动画加载框
  import { ElLoading } from 'element-plus'
  // 引入toRaw
  import {toRaw} from "vue"
  // 使用路由对象
  let router = useRouter()
  // 使用store
  let userStore = useUser();
  // 控制loading的显示与隐藏
  let loading =ref(true)
  // 表单校验成功之后，回调的方法
  let validateSuccess=()=>{  
    // 发起登录请求
    // 1.登录请求之前要先校验验证码,将验证码统一转为小写
    verifyCaptcha(loginFormData.captcha.toLowerCase())
  };
    // 表单校验失败之后，回调的方法
  let validateFailed=()=>{
    console.log('校验失败');
  };
  // 使用submitForm
  let submitForm = useSubmitForm(validateSuccess,validateFailed)
  const loginFrom = ref()
  // 注入到表单的数据
  const loginFormData = reactive({
    username: '',
    password: '',
    captcha: '',
  });
  // 测试接口
  // 声明一个展示验证码的响应式变量
  let captcha = ref()
  // 获取验证码接口
  let getCaptcha = async ()=>{
    // 一旦发起请求，就要打开loading动画
    loading.value = true;
    let res = await api.getCaptchaApi()
    // 关闭加载动画
    loading.value = false;
    if(res.data.state){
      captcha.value=res.data.img
    }
  };
    // 校验验证码
    // 1.本地的表单校验通过之后，（validateSuccess）
    // 2.通过接口校验验证码，一定要配置本地代理
    // 3.声明loadingInstance，用于存储loading动画实例
    let loadingInstance = null;
    let verifyCaptcha = async captcha=>{
      // 发起登录请求的时候，就要加载loading加载框
       loadingInstance = ElLoading.service({
        text:'正在登录...',
        background:'rgba(0,0,0,.4)'
      })
      try{
        // 表示验证码验证通过
        // 发起登录请求
        let res = await api.verifyCaptchaApi(captcha);
        login(loginFormData.username,loginFormData.password)
      }catch(e){
        // 验证码校验失败了，需要重新刷新一个新的验证码
        // console.log(e);
        getCaptcha();
        // 关掉加载动画框
        loadingInstance.close()
      }
    };
     // 用户名密码登录逻辑
    /**
     * 
     * @param {String} username  用户名
     * @param {String} password  密码
     */
    let login =async (username,password)=>{
      
      // 调用登录请求的接口
      try{
        let res =  await api.loginApi(username,password)
        // console.log(res);
        // 存储token,存到sessionStorage中
        sessionStorage.setItem('my-token',res.data.token)
        // 存储用户信息
        userStore.$patch({
          userInfo:res.data.userInfo
        })    
        //存储用户权限
        localStorage.setItem(
          "permissionButtons",
          JSON.stringify(res.data.permission.buttons)
        );     
        // 登录成功需要跳转页面
        router.push("/")
        //  // 关掉加载动画框
        //  loadingInstance.close()
      }catch(e){
        // console.log(e);
        // 登录失败也要关掉加载动画框
        loadingInstance.close()
      }
    }
    onUnmounted(()=>{
      // 关掉加载动画框
      loadingInstance && loadingInstance.close()

    })
    //  首次页面加载调用
    onMounted(()=>{
      getCaptcha()
    }) 
   
</script>
<style lang="less" scoped>

.demo-loginFormData{
  padding-right: 50px;
  .username-form-item{
    margin-bottom: 30px;
    position: relative;
    font-size: 14px;
    :deep(.el-form-item__label){
      color:#fff
    }
    .el-input{
      width:250px;
      font-size: 14px;
      // :deep(.el-input__inner){
      //   color:red
      // }
    }
  }
  .password-form-item{
  margin-bottom: 30px;
    :deep(.el-form-item__label){
      color:#fff
    }
    .el-input{
      width: 300px;
    }
  }
  .captcha-form-item{
    margin-bottom: 30px;
    :deep(.el-form-item__label){
      color:#fff
    }
    .el-input{
      width: 125px;
    }
    .el-input :deep(.el-input__wrapper) {
    background-color: #FFFFFF;
    box-shadow: 0 0 0 0;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    }
    .span{
      width:104px;
      background: #fff;
      border-radius: 0 5px 5px 0;
      height: 32px;
      cursor: pointer;
      :deep(svg){
        width:104px;
        height: 32px;
      }

    }
  }
  .login-button{
    .el-button{
      width:250px;
      background: linear-gradient(90deg,#1596fb,#002dff);
    }
  }
}
</style>